<template>
	<view>
		<uv-sticky bgColor="#fff">
			<uv-tabs :list="tabsList" @change="changeTab" lineColor='#3D5CFF'
				activeStyle="color:#3D5CFF;font-size:16px;"></uv-tabs>
		</uv-sticky>
		<view class="p-12">

			<z-paging ref="paging" :top-z-index='1' @query="getList" use-page-scroll v-model="list">
				<view class="bg-white rounded-8 px-10 py-12" v-for="(item,index) in list">
					<view class="flex">
						<image :src="item.goods.image" class="w-80 h-80"></image>
						<view class="flex flex-column flex-x-space-between ml-8 flex-1">
							<view>
								<text class="fs-15 fw-600">{{item?.goods?.name}}</text>
							</view>
							<view class="text-right">
								<text
									class="fs-14 text-blue-1">{{item.status==1?'待发货':item.status==2?'待收货':'已完成'}}</text>
							</view>
						</view>
					</view>
					<view class="mt-14 fs-15 flex flex-x-space-between">
						<text>订单编号</text>
						<view class="fs-14">
							<text class="text-grey-4">{{item.order_no}}</text>
							<text class="mx-2">|</text>
							<text class="text-blue-1" @click="$tool.copy(item.order_no)">复制</text>
						</view>
					</view>

					<view class="mt-14 fs-15 flex flex-x-space-between">
						<text>订单时间</text>
						<text class="text-grey-4 fs-14">{{item.create_at}}</text>
					</view>
				</view>

			</z-paging>
		</view>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { $http, $page, $tool } from '@/utils'
	import { reactive, ref } from 'vue';
	import {onReachBottom,onPageScroll} from'@dcloudio/uni-app'
	const list = ref()
	const paging = ref()
	const queryForm = ref({
		page: 1,
		limit: 10,
		type: 0
	})
	const tabsList = reactive([
		{ name: '全部', type: 0 },
		{ name: '待发货', type: 1 },
		{ name: '待收货', type: 2 },
	])
	useZPaging(paging)
	const getList = (page, limit) => {
		queryForm.value.page = page
		queryForm.value.limit = limit
		$http.get('Order/getList', queryForm.value).then(res => {
			paging.value.complete(res.data)
		})
	}

	const changeTab = (e) => {
		queryForm.value.type = e.type
		paging.value.reload()
	}
</script>

<style>
	.uv-tabs__wrapper__nav__line {
		bottom: 6px !important;
	}
</style>